<template>
  <div>
    <Form ref="form" :model="modelObject" :label-width="80" :show-message="true">
      <FormItem prop="employeeId" label="选择员工" required v-show="isAdd">
        <SearchEmployee ref="employeeSearch" @chooseEmployee="chooseEmployee"/>
      </FormItem>
      <FormItem label="员工" v-if="!isAdd">
        <span>{{modelObject.userName}}</span>
      </FormItem>
      <FormItem prop="name" label="座席名" class="input-normal" :rules="ruleName">
        <Input type="text" v-model.trim="modelObject.name"></Input>
      </FormItem>
      <FormItem prop="email" label="电子邮箱" class="input-normal" :rules="ruleEmail">
        <Input type="email" v-model.trim="modelObject.email"></Input>
      </FormItem>
      <FormItem prop="autoAssign" label="自动分配" class="input-normal" >
        <Checkbox v-model="modelObject.autoAssign" class="y_condition" :true-value="1" :false-value="0" ></Checkbox>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import SearchEmployee from "../widgets/SearchEmployee";

export default {
  name: "CustomerServiceForm",
  props: {
    modelObject: {type: Object, required: true},
    isAdd: {type: Boolean, required: true},
  },
  components: {
    SearchEmployee,
  },
  data() {
    return {
      ruleName: {
        type: "string", required: true, pattern: /^[a-zA-Z][a-zA-Z\s]*$/, message: "请填写纯英文名字"
      },
      ruleEmail: {
        type: "email", required: true, message: "请填写正确邮箱"
      },
    }
  },
  methods: {
    chooseEmployee(value) {
      this.modelObject.employeeId = value==null?"":value.id;
    },
  }
}
</script>

<style scoped lang="less">
.input-normal {
  width: 80%;
}
</style>
